import { TaskDataDTO } from "@/api/task/types"
import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElTable,
  ElTableColumn,
} from "element-plus"
import { useTaskSearchHook } from "./useTaskSearchHook"
import createAndUpdateTask from "./components/createAndUpdateTask.vue"

export default defineComponent({
  components: {
    createAndUpdateTask,
  },
  setup() {
    // const taskList = ref<TaskDataDTO[]>([])

    const { taskList, searchForm, queryTaskList } = useTaskSearchHook()
    // queryTaskList()

    const createAndUpdateShow = ref(false)

    const changeCreateAndUpdateShow = () => {
      createAndUpdateShow.value = true
    }

    const handleChangeSearchForm = (val: string) => {
      searchForm.value.taskName = val
    }

    const searchFormDom = (
      <ElForm model={searchForm}>
        <ElRow gutter={12}>
          <ElCol span={4}>
            <ElFormItem label="任务名称">
              <ElInput v-model={searchForm.value.taskName} />
            </ElFormItem>
          </ElCol>
          <ElCol span={4}>
            <ElFormItem label="优先级">
              <ElInput v-model={searchForm.value.taskLevel} />
            </ElFormItem>
          </ElCol>
          <ElCol span={4}>
            <ElFormItem label="状态">
              <ElInput v-model={searchForm.value.taskStatus} />
            </ElFormItem>
          </ElCol>
          <ElCol span={4}>
            <ElFormItem label="开始时间">
              <ElInput v-model={searchForm.value.startTime} />
            </ElFormItem>
          </ElCol>
          <ElCol span={4}>
            <ElFormItem label="结束时间">
              <ElInput v-model={searchForm.value.endTime} />
            </ElFormItem>
          </ElCol>
          <ElCol span={4}>
            <ElButton type="primary" onClick={changeCreateAndUpdateShow}>
              新建任务
            </ElButton>
            <ElButton>导入任务</ElButton>
          </ElCol>
        </ElRow>
      </ElForm>
    )

    const tableCom = (
      <ElTable data={taskList.value} border>
        <ElTableColumn prop="taskName" label="名称" showOverflowTooltip />
        <ElTableColumn prop="taskType" label="类型" />
        <ElTableColumn prop="taskLevel" label="优先级" />
        <ElTableColumn prop="taskStatus" label="状态" />
        <ElTableColumn prop="progress" label="任务进度" />
        <ElTableColumn prop="startTime" label="开始时间" />
        <ElTableColumn prop="endTime" label="结束时间" />
        <ElTableColumn prop="taskLeader" label="负责人" />
        <ElTableColumn prop="groupLeader" label="小组负责人" />
        <ElTableColumn prop="workload" label="工时" />
        <ElTableColumn prop="workload" label="操作" align="center">
          <ElButton size="small">编辑</ElButton>
          <ElButton size="small">详情</ElButton>
          <ElButton size="small">更多</ElButton>
        </ElTableColumn>
      </ElTable>
    )
    return () => (
      <div>
        <searchFormDom />
        <tableCom />
        <createAndUpdateTask v-model={createAndUpdateShow.value} />
      </div>
    )
  },
})
